<template>
    <div class="top-nav">
        <router-link to="/" class="logo">
            <svg class="icon" >
                <use xlink:href="#icon-mogu"></use>
            </svg>
            <svg class="icon" >
                <use xlink:href="#icon-niuniu"></use>
            </svg>
            <div>
                <strong>zgn-ui</strong>
            </div>
        </router-link>
        <ul class="menu">
            <li>
                <routerLink to="/Doc"><strong>文档</strong></routerLink> 
            </li>
        </ul>
        <span class="toggleAside"  @click="toggleMenu" v-if="toggleMenuButtonVisible">
            <svg class="icon" >
                <use xlink:href="#icon-zhankai"></use>
            </svg>
         </span>
    </div>
</template>

<script lang="ts">
import { Ref,inject } from 'vue';

export default{
    props:{
        toggleMenuButtonVisible:{
            type:Boolean,
            default:false
        }
    },
    setup(){
        const menuVisible  = inject<Ref<boolean>>('menuVisible')
        const toggleMenu = ()=>{
            menuVisible.value=!menuVisible.value
        }
        return {toggleMenu}
    }
}
</script>

<style lang="scss" scoped>
.top-nav {
    display: flex;
    padding-left: 20px;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    justify-content: center;
    align-items: center;
    height: 60px;
    padding: 5px;
    > .logo {
        margin-right: auto;
        display: flex;
        align-items: center;
        >.icon{
            width: 40px;
            height: 40px;
        }
    }
    > .menu {
        display: flex;
        white-space: nowrap;
        flex-wrap: nowrap;
        > li {
            margin-right: 20px;
        }
    }
    >.toggleAside{
        position: absolute;
        left: 16px;
        top:50%;
        transform: translateY(-50%);
        display: none;
        >svg{
            width: 30px;
            height: 30px;
        }
    }
    @media (max-width:500px) {
        >.menu{display: none;}
        >.logo{margin: 0 auto;}
        >.toggleAside{
            display: inline-block;
        }
    }
}

</style>